<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页预览海康威视的h.264视频流</title>
    <style media="screen">
        video.rotate180 {
            width: 100%;
            height: 100%;
            transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
        }
    </style>
</head>
<body>
<h2>网页预览海康威视的h.264视频流</h2>
<div class="wfsjs">
    <video id="video1" muted="muted" style="width: 50%;height: 70%;" autoplay="autoplay"></video>
    <!--<div class="ratio"></div>-->
</div>
<br>
<div>
    <span>ip地址：</span>
    <input type="text" name="ip" id="ip" value="192.168.2.64">
</div>
<div>
    <span>用户名：</span>
    <input type="text" name="username" id="username" value="admin">
</div>
<div>
    <span>&nbsp;&nbsp;密 码：</span>
    <input type="password" name="password" id="password" value="hik12345">
</div>
<div>
    <span>&nbsp;&nbsp;端 口：</span>
    <input type="text" name="port" id="port" value="8000">
</div>
<select name="channelId" id="channelId">
    <option value="1">通道一</option>
    <option value="2">通道二</option>
</select>
<button id="loginAndPlayView">登录并预览</button>
<button id="logoutPlayView">退出预览和登录</button>

<script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/wfs.js"></script>
<script>
    var globalUserId;
    var globalPlayId;
    /**
     * 登录并预览按钮点击：先请求 登录+预览接口，然后返回将返回的lUserID拼接到socket地址后面，创建一个websocket。
     * 然后创建wfs实列 ，执行wfs.attachMedia(),最后将socket和vide标签绑定给创建的wfs即可
     */
    $("#loginAndPlayView").click(function () {
        var loginVo = {
            "username": $("#username").val(),
            "password": $("#password").val(),
            "ip": $("#ip").val(),
            "port": $("#port").val(),
            "channelId": $("#channelId").val(),
        };
        $.ajax({
            url:  "/hkCamera/loginAndPlayView",    //请求的url地址
            dataType: "json",   //返回格式为json
            contentType: "application/json",
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            data: JSON.stringify(loginVo),    //参数值,键值对
            type: "POST",   //请求方式
            success: function (res) {
                if (res.code && res.data && res.data.loginStatus === "1") {
                    var userId = res.data.userId;
                    var playId = res.data.playId;
                    globalPlayId = playId;
                    globalUserId = userId;
                    loginVo.userId = userId;
                    loginVo.playId = playId;
                    if (Wfs.isSupported()) {
                        var video1 = document.getElementById("video1");
                        var wfs = new Wfs();
                        wfs.attachMedia(video1, userId + "_" + playId, "H264Raw", userId);    //绑定video标签
                        //调试视频标签播放速度
                        video1.playbackRate = 1.0;
                    }
                } else {
                    alert("播放失败，错误信息：" + ((res.data && res.data.loginMessage) ? res.data.loginMessage : ""))
                }
            },
            error: function () {
            }
        })

    })

    $("#login").click(function () {
        var loginVo = {
            "username": $("#username").val(),
            "password": $("#password").val(),
            "ip": $("#ip").val(),
            "port": $("#port").val(),
            "channelId": $("#channelId").val()
        };
        $.ajax({
            url:  "/hkCamera/loginAndPlayView",    //请求的url地址
            dataType: "json",   //返回格式为json
            contentType: "application/json",
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            data: JSON.stringify(loginVo),    //参数值,键值对
            type: "POST",   //请求方式
            success: function (res) {
                if (res.code && res.data && res.data.loginStatus === "1") {
                    var userId = res.data.userId;
                    var playId = res.data.playId;
                    globalPlayId = playId;
                    globalUserId = userId;
                    if (Wfs.isSupported()) {
                        var video1 = document.getElementById("video1");
                        var wfs = new Wfs();
                        wfs.attachMedia(video1, userId + "_" + playId, "H264Raw", userId);    //绑定video标签
                        //调试视频标签播放速度
                        video1.playbackRate = 1.0;
                    }
                } else {
                    alert("播放失败，错误信息：" + ((res.data && res.data.loginMessage) ? res.data.loginMessage : ""))
                }
            },
            error: function () {
            }
        })
    })

    $("#logoutPlayView").click(function () {
        console.log(globalUserId);
        console.log(globalPlayId);
        $.ajax({
            url:  "/hkCamera/logoutPlayView",    //请求的url地址
            dataType: "json",   //返回格式为json
            contentType: "application/json",
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            data: {
                userId: globalUserId,
                playId: globalPlayId
            },    //参数值,键值对
            type: "GET",   //请求方式
            success: function (res) {
                if (res.code === 200) {
                    alert("退出成功")
                } else {
                    alert("播放失败，错误信息：" + res.msg)
                }
            },
            error: function () {
            }
        })
    })
</script>
</body>
</html>